<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <script src="./js/flexible.js"></script>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2633224_rehj5q59vt9.css"/>
    <style>
        *{margin: 0; padding: 0;}

        body{font-size: 12px;}

        ul,li{list-style: none;}
        .icon-wode{ font-size: 24px; margin-left: 12px;}
        .icon-gouwuche{ font-size: 24px; margin-left: 12px;}
/* 头部 */
        .header{
            width: 100%;
            height: 80px;
            position: fixed;
            top: 0; 
            left: 0;
        }
        .aaa{
            width: 100%;
            height: 40px;
            line-height: 35px;
            background: #fff;
        }
        .aaa input{
            margin-left: 20px;
            width: 250px;
            height: 24px;
            border:1px solid rgb(226, 219, 219);
            border-radius: 10px
        }
        .jineituijian{
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            color: #ff6692;
            display: flex;
            justify-content: space-around;
            background: #fff;
            }
        .xiaotubiao{
            width: 100%;
            margin-top: 80px;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
            /* background: lemonchiffon; */
        }
        .header_img img{
            width: 100%;
        }
        .header_img1 img{
            width: 100%;
            height: 80px;
        }
        .tupian{ 
            height: 150px;
            line-height: 150px;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            background: rgb(243, 243, 162);
        }
/* 中间内容 */
        .dangjibaokuan{
            height: 46px;
            line-height: 46px;
            font-size: 16px;
            display: flex;
            justify-content: space-around;
        }
/* 孙子里样式 */
        .con1{
            display: flex;
            flex-wrap:wrap;
            justify-content: space-around;
            background: rgb(250, 250, 250);
            padding: 5px;
        }
        .myitemcon{
            width: 118px; 
            height: 224px;  
        }
        .item{
            width: 118px;
            height: 224px;
            background: #fff;
        }
        .item_img img{
            width: 118px;
            height: 114px;
            color: rgb(31, 175, 132);
        }
        .item .name{
            height: 54px;
            padding: 3px;
            /* text-overflow: ellipsis; 
            white-space: wrap;
            overflow: hidden; */
        }
        .item .price{ 
            color: #ff005a;
            margin-left: 9px;
            margin-bottom: 2px;
        }
        .buy-btn{
            width: 100px;
            height: 28px;
            background:#ff005a;
            border:#ff005a;
            color: #fff;
            border-radius: 2px;
            margin-left: 9px;
            }
    </style>
</head>
<body>
    
    <div id="app">
        <!-- 使用 -->
        <myheader></myheader>
        <mycon :list="lista"></mycon>
    </div>

    <script>
        /*********子组件*****************/
        //头部
        var myheader = {
            template:`<div>
                        <div class="header">
                            <div class="aaa">
                                <span class="iconfont icon-wode"></span>
                                <input type="text" name="" id="" placeholder="保湿面膜0.3元"/>
                                <span class="iconfont icon-gouwuche"></span>
                            </div>
                            <div class="jineituijian">
                                <span>今日推荐</span>
                                <span>面膜中心</span>
                            </div>
                        </div>
                        
                        <div class="xiaotubiao">
                            <div>
                                <span class="iconfont icon-quchenshi"></span>
                                <span>屈臣氏全国送</span>
                            </div>
                            <div>
                                <span class="iconfont icon-zheng"></span>
                                <span>屈臣氏精选</span>
                            </div>
                            <div>
                                <span class="iconfont icon-zheng"></span>
                                <span>正品保证</span>
                            </div>
                            <div>
                                <span class="iconfont icon-baoyou"></span>
                                <span>满68包邮</span>
                            </div>
                        </div>
                        <div class="header_img">
                            <img src="https://image.watsons.com.cn//upload/f6aa9564.jpg?x-oss-process=image/quality,q_80/format,webp">
                        </div>
                        <div class="header_img1">
                            <img src="https://image.watsons.com.cn//upload/b89ac8f7.png?x-oss-process=image/quality,q_80/format,webp">
                        </div>
                        <div class="tupian">上云店瓜分1亿元回馈金</div>
                      </div>`
        }

        /*********孙子组件*****************/
         var myitem = {
             props:["item"],
             template:`<div class="list">
                            <div class="myitemcon">
                                <div class="item">
                                    <div class="item_img"><img :src="item.over_image_url"/></div>
                                    <div class="name">{{item.item_name}}</div>
                                    <div class="price">￥{{item.min_app_price}}</div>
                                    <button class="buy-btn">立即购买</button>
                                </div>
                            </div>
                       </div>`
         }

        //中间内容
        var mycon = {
            props:["list"],
            mounted () {
                // console.log(this.list);
                this.$nextTick( () => {
                    console.log(this.list);
                })
            },
            //注册孙子
            components:{ myitem },
            template:`<div class="con">
                            <div class="dangjibaokuan">
                                <span>当季爆款</span>
                                <span>美白秘籍</span>
                                <span>屈家热卖</span>
                            </div>
                            <ul class="con1">
                                <myitem v-for="item in list" :key="item.id" :item="item"></myitem>
                            </ul>
                            
                      </div>`
        }

        /*************根组件****************/
        var app = new Vue({
            el:"#app",
            data:{
                lista:[]
            },
            mounted () {
                //axios获取数据
                axios.get("list01.json").then(res=>{
                    // console.log(res);
                    this.lista = res.data.data.item_list;
                    // console.log(this.lista); 
                })
            },
            //注册
            components: {
                myheader, mycon,
            }
        })
    </script>
</body>
</html>